<template>
  <div>
    <div class="login">
      <Particles id="tsparticles" class="login__particles" :options="options" />
      <div class="loginPart">
        <div class="title">模型管理平台</div>
        <el-form
          ref="ruleFormRef"
          :model="user"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
          @submit.prevent
        >
          <el-form-item label="账号：" prop="userName">
            <el-input
              v-model="user.userName"
              placeholder="请输入账号"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              v-model="user.password"
              type="password"
              placeholder="请输入密码"
              maxlength="20"
              show-password
              clearable
              @keyup.enter="onSubmit(ruleFormRef)"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="primary" @click="onSubmit(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">© 2023 MXPT. All rights reserved.</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { login } from "@/services/modules/home";
import { useRouter } from "vue-router";
import { localCache } from "@/utils/cache";
import { encode, decode } from "js-base64";
const router = useRouter();
//from表单校验
const ruleFormRef = ref();
// 这里存放数据
const user = reactive({
  userName: "",
  password: "",
});
const users = reactive({
  userName: "",
  password: "",
});
//校验
const validatePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const validateuserName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    callback();
  }
};
//校验
const rules = reactive({
  password: [{ validator: validatePassword, trigger: "blur" }],
  userName: [{ validator: validateuserName, trigger: "blur" }],
});
const options = {
  fpsLimit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        // 开启鼠标点击的效果
        enable: true,
        mode: "push",
      },
      onHover: {
        // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: "grab",
      },
      resize: true,
    },
    modes: {
      // 配置动画效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      push: {
        quantity: 4,
      },
      grab: {
        distance: 200,
        duration: 0.4,
      },
      attract: {
        // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 5,
      },
    },
  },
  particles: {
    color: {
      value: "#BA55D3", // 粒子点的颜色
    },
    links: {
      color: "#FFBBFF", // 线条颜色
      distance: 150, //线条距离
      enable: true,
      opacity: 0.4, // 不透明度
      width: 1.2, // 线条宽度
    },
    collisions: {
      enable: true,
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: "none",
      enable: true,
      out_mode: "out",
      random: false,
      speed: 0.5, // 移动速度
      straight: false,
    },
    number: {
      density: {
        enable: true,
        value_area: 800,
      },
      value: 80, //粒子数
    },
    opacity: {
      //粒子透明度
      value: 0.7,
    },
    shape: {
      //粒子样式
      type: "star",
    },
    size: {
      //粒子大小
      random: true,
      value: 3,
    },
  },
  detectRetina: true,
};
// function onSubmit() {
//   setToken();
// }
function onSubmit(formEl) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // Object.keys(user).forEach((key) => {
      //   if (key == "userName" || key == "password") {
      //     users[key] = encode(user[key]);
      //   } else {
      //     users[key] = user[key];
      //   }
      // });
      login(user)
        .then((res) => {
          if (res.code == 200) {
            localCache.setCache("login/token", res.data.token);
            localCache.setCache("login/token/base", res.data.token);

            if (router.currentRoute.value.query?.redirect) {
              router.push(`/${router.currentRoute.value.query.redirect}`);
            } else {
              router.push("/index");
            }
          } else {
            ElMessage.error("账号或验证码错误！");
          }
        })
        .catch((error) => {
          ElMessage.error("账号或验证码错误！");
        });
    } else {
      ElMessage.error("请输入账号密码！");
      return false;
    }
  });
}
function setToken() {
  return new Promise((resolve, reject) => {
    login({
      userName: "admin",
      password: "admin",
    }).then((res) => {
      if (res.code === 200) {
        localCache.setCache("login/token", res.data.token);
        localCache.setCache("login/token/base", res.data.token);

        if (router.currentRoute.value.query?.redirect) {
          router.push(`/${router.currentRoute.value.query.redirect}`);
        } else {
          router.push("/index");
        }
      }
    });
  });
}
</script>

<style lang="less" scoped>
:deep(.el-form-item__label) {
  color: white;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  // background-color: #fff0f5;
  // background-color: #568ed0;
  background-color: #5770d0;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.login__particles {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("@/assets/images/login/background.jpg");
  opacity: 0.9;
  position: fixed;
  pointer-events: none;
}
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 80%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(255, 204, 255, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
  :deep(.el-input) {
    width: 400px;
  }
  :deep(.el-button) {
    width: 390px;
    margin-left: 60px;
    height: 35px;
  }
}
.title {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;

  /*文字居中*/
}
// .btn {
//   // transform: translate(58px);
//   width: 400px;
//   height: 40px;
//   text-align: center;
//   font-size: 15px;
// }
</style>
